<template>
  <div class="container">
    <div class="bg">
      <div class="title">游戏策划后台管理系统</div>
      <el-row>
        <el-col :span="12">
          <div class="grid-content">
            <div style="margin: auto">
              <div class="text" style="margin-right: 150px">管</div>
              <div class="text">理</div>
              <div class="text" style="margin-left: 150px">员</div>
            </div>
          </div>
        </el-col>
        <el-col :span="11" :offset="1">
          <div class="grid-content" style="height: 500px">
            <form>
              <div class="form">
                <div class="avator"></div>
                <label>手机号</label>
                <el-input class="input"
                          type="text"
                          placeholder="phone number"
                          v-model="phoneNumber"/>
                <label>密码</label>
                <el-input class="input" type="password" placeholder="password" v-model="password"/>
                <el-button style="width: 80px;background: lightcyan" @click="handleLogin">登录</el-button>
              </div>
            </form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script setup>
import {ref} from 'vue';
import {Login} from '@/apis/login.js'
import {ElMessage} from 'element-plus'
import router from "@/router/index.js";

const phoneNumber = ref("");
const password = ref("");

const handleLogin = async () => {
  console.log("我就想知道点进来了没！！！")
  try {
    const response = await Login({
      phone_num: phoneNumber.value,
      password: password.value
    })
    console.log(response.data);
    if (response.data.status === 1 && response.data.data.user_type === "admin") {
      //存一下用户名和头像
      localStorage.setItem("username", response.data.data.username)
      localStorage.setItem("img_url",response.data.data.img_url)
      localStorage.setItem("lastlogin_time",response.data.data.lastlogin_time)

      await router.push({name: 'Layout'})
      ElMessage({
        showClose: true,
        message: '登录成功！',
        type: 'success',
      })
    } else {
      ElMessage({
        showClose: true,
        message: response.data.msg,
        type: 'error',
      })
    }
  } catch (error) {
    console.log(error);
    ElMessage({
      showClose: true,
      message: "连接失败！",
      type: 'error',
    })
  }
}
</script>

<style scoped>
.avator {
  width: 130px;
  height: 130px;
  background-image: url("@/assets/imgs/login2.png");
  background-size: contain;
  background-position: center;

  border-radius: 50%;
  border: rgb(255, 223, 187) 6px solid;
}

.text {
  text-align: center;
  font-family: 华文行楷, sans-serif;
  font-size: 100px;
  transition: font-size 0.5s ease; /* 添加过渡效果 */
}

.text:hover {
  font-size: 150px;
  color: rgb(127, 193, 255);
}

.title {
  text-align: center;
  font-family: 华文行楷, sans-serif;
  font-size: 40px;
  transition: font-size 0.5s ease; /* 添加过渡效果 */
}

.title:hover {
  font-size: 80px;
  color: rgb(127, 193, 255);
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  display: flex;
  flex-direction: column;
  position: relative;

  height: 500px;
  border-radius: 10px;
  min-height: 36px;
  overflow: hidden;

  transition: box-shadow 0.5s ease;
}

.grid-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-color: #eef9ff;
  z-index: -1;
}

.grid-content:hover {
  box-shadow: 0 0 10px rgb(215, 253, 219), /* 第一层阴影，轻微的内发光 */ 0 0 20px rgb(127, 193, 255), /* 第二层阴影，更强的内发光 */ 0 0 30px rgb(255, 243, 210); /* 第三层阴影，较弱的外发光 */
}

.container {
  display: flex;
  position: relative;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 视口高度，确保bg div在整个页面中居中 */
}

.bg {
  width: 1000px;
  height: 500px;
  border-radius: 50px;
  padding: 50px;
  position: relative;
  overflow: hidden;
}

form {
  width: 100%;
  height: 100%;
}

.form {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.form .input, .form label, .form button {
  width: 200px;
  margin-top: 20px;
}

</style>